import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link, browserHistory } from 'dva/router';
import styles from './UserForm.less';
import {Row, Col,Tooltip,Icon,Form,Input,Select,Checkbox,Radio,Button,TreeSelect, notification} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class UserForm extends React.Component{
  constructor(props){
    super(props);
    this.state={
          id: this.props.editId || '',
          usergroupname: this.props.usergroupname || '',
          userType:this.props.userType || 'a',
          ival1:this.props.ival1 || [],
          ival2:this.props.ival2 || [],
          ival3:this.props.ival3 || [],
          ival4:this.props.ival4 || [],
          ival5:this.props.ival5 || [],
          ival6:this.props.ival6 || [],
    }
  }

  fetchData(type, search){
      this.props.dispatch({
              type: type,
              payload: search
      })
    };

  initData(){
    this.fetchData('UserForm/conditionsQuery');
  };
  componentWillMount() {
      window.localStorage.removeItem("gid");
       this.initData();       
  };

  onChange(value) {
    //console.log('onChange ', value, arguments);
    this.setState({ value });
  }

  getData(datas,str, val){
      return {
          treeData:datas,
          value: this.state[val],
          onChange: this.onChanges,
          multiple: true,
          treeCheckable: true,
          // showCheckedStrategy: SHOW_PARENT,
          searchPlaceholder: str,
      }
    }

  handleReset(e){
    e.preventDefault();
    this.props.form.resetFields();
  }

  handleSearch(e){
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let data = {pageSize:10, pageNum:1, channelType:values.userType, condition:JSON.stringify({ival1:values.ival1, ival2:values.ival2, ival3:values.ival3, ival4:values.ival4, ival5:values.ival5, ival6:values.ival6})};
        //window.localStorage.setItem("gid", values.id);
        this.fetchData("TableList/userListByGroup", data);
      }
    });
  }

  handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        
        if(values.ival1.length>10){
            notification.warning({message: '提示信息',description: '筛选自然人属性，最多能选择10个条件'});
            return;
        }else if(values.ival2.length>10){
            notification.warning({message: '提示信息',description: '筛选产品需求偏好，最多能选择10个条件'});
            return;
        }else if(values.ival3.length>10){
            notification.warning({message: '提示信息',description: '筛选营销创意偏好，最多能选择10个条件'});
            return;
        }else if(values.ival4.length>10){
            notification.warning({message: '提示信息',description: '筛选品牌联系强度，最多能选择10个条件'});
            return;
        }else if(values.ival5.length>10){
            notification.warning({message: '提示信息',description: '筛选社交传播影响，最多能选择10个条件'});
            return;
        }else if(values.ival6.length>10){
            notification.warning({message: '提示信息',description: '筛选购买渠道偏好，最多能选择10个条件'});
            return;
        }

        let data = {id:values.id, usergroupname: values.usergroupname, contactinfromation: values.userType, condition:JSON.stringify({ival1:values.ival1, ival2:values.ival2, ival3:values.ival3, ival4:values.ival4, ival5:values.ival5, ival6:values.ival6})};
        this.fetchData('UserForm/'+(values.id?'updateGroup':'addGroup'), data);

       setTimeout(()=>{
             this.fetchData("homePage/groupTabQuery","pageSize=10&pageNum=1");
        
            if(window.location.hash.indexOf("UserGroup")>0){
              window.location.hash="#/GroupList?_k="+(new Date().getTime());
            }else{
              // 关闭浮层
              this.props.func && this.props.func();
            }
        }, 2000);
      }
    });
  }
    
    render(){
      const { getFieldDecorator } = this.props.form;
      return (
        <div className="group_form">
            <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                <FormItem>
                {getFieldDecorator('id', {
                  initialValue: this.state.id
                })(
                  <Input type="hidden" />
                )}
              </FormItem>
                <FormItem
                  id="control-input"
                  label="群组名称"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 14 }}
                >
                {getFieldDecorator('usergroupname', {
                  rules: [{ required: true, message: '请填写群组名称!' }],
                  initialValue:this.state.usergroupname
                })(
                  <Input id="control-input" className={styles.finput} placeholder="请输入所创建的群组名称"/>
                )}
                </FormItem>
                <FormItem
                  label="用户类型"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 14 }}
                >
                {getFieldDecorator('userType', {
                  rules: [{ required: true, message: '请选择用户类型!' }],
                  initialValue:this.state.userType
                })(
                  <RadioGroup>
                    <Radio value="a" className="fradio">微信</Radio>
                    <Radio value="b" className="fradio">手机号</Radio>
                    <Radio value="c" className="fradio">手机号&微信</Radio>
                  </RadioGroup>
                )}
                </FormItem>
                <FormItem
                  label="筛选条件"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 14 }}
                  hasFeedback
                >
                  {getFieldDecorator('ival1', {
                      initialValue: this.state.ival1,
                    })(
                         <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data1,'筛选自然人属性','ival1')} className="fts" />
                  )}
                  {getFieldDecorator('ival2', {
                      initialValue: this.state.ival2,
                    })(
                         <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data2,'筛选产品需求偏好','ival2')} className="fts" />
                  )}
                  {getFieldDecorator('ival3', {
                      initialValue: this.state.ival3,
                    })(
                          <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data3,'筛选营销创意偏好','ival3')} className="fts" />
                  )}
                  {getFieldDecorator('ival4', {
                      initialValue: this.state.ival4,
                    })(
                         <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data4,'筛选品牌联系强度','ival4')} className="fts" />
                  )}
                  {getFieldDecorator('ival5', {
                      initialValue: this.state.ival5,
                    })(
                         <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data5,'筛选社交传播影响','ival5')} className="fts" />
                  )}
                  {getFieldDecorator('ival6', {
                      initialValue: this.state.ival6,
                    })(
                         <TreeSelect {...this.getData(this.props.UserForm.conditionsData.data6,'筛选购买渠道偏好','ival6')} className="fts" />
                  )}
                </FormItem>
                <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 50 }} className={styles.fbot}>
                  <Button type="primary" htmlType="reset" onClick={this.handleReset.bind(this)}>清除</Button>
                  <Button type="primary" onClick={this.handleSearch.bind(this)}>查询</Button>
                  <Button type="primary" htmlType="submit">确定</Button>
                </FormItem>
            </Form>
        </div>
      );
    }
}

UserForm.propTypes = {
  func:PropTypes.func,
  editId: PropTypes.number,
  usergroupname: PropTypes.string,
  userType:PropTypes.string,
  ival1:PropTypes.array,
  ival2:PropTypes.array,
  ival3:PropTypes.array,
  ival4:PropTypes.array,
  ival5:PropTypes.array,
  ival6:PropTypes.array
};

function mapStateToProps({UserForm}){
    return {UserForm}
}

UserForm = Form.create()(UserForm);

export default connect(mapStateToProps)(UserForm)